<template>
	<view class="main">
		<view class="spinner">
			<view class="rect1"></view>
			<view class="rect2"></view>
			<view class="rect3"></view>
			<view class="rect4"></view>
			<view class="rect5"></view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	.main {
		width: 100vw;
		height: 100vh;
		position: relative;
	}

	.spinner {
		position: absolute;
		top: 50vh;
		margin-top: -30px;
		left: 50%;margin-left:-25px;
		/* margin: 49% auto; */
		width: 50px;
		height: 60px;
		text-align: center;
		font-size: 10px;
	}

	.spinner>view {
		background-color: #fff;
		height: 100%;
		width: 6px;
		margin-right: 3px;
		display: inline-block;

		-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
		animation: stretchdelay 1.2s infinite ease-in-out;
	}

	.spinner .rect2 {
		-webkit-animation-delay: -1.1s;
		animation-delay: -1.1s;
	}

	.spinner .rect3 {
		-webkit-animation-delay: -1.0s;
		animation-delay: -1.0s;
	}

	.spinner .rect4 {
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}

	.spinner .rect5 {
		-webkit-animation-delay: -0.8s;
		animation-delay: -0.8s;
	}

	@-webkit-keyframes stretchdelay {

		0%,
		40%,
		100% {
			-webkit-transform: scaleY(0.4)
		}

		20% {
			-webkit-transform: scaleY(1.0)
		}
	}

	@keyframes stretchdelay {

		0%,
		40%,
		100% {
			transform: scaleY(0.4);
			-webkit-transform: scaleY(0.4);
		}

		20% {
			transform: scaleY(1.0);
			-webkit-transform: scaleY(1.0);
		}
	}
</style>
